<template>
    <div class="statistics" ref="statisticsRef">
       <!-- 标题区域 -->
       <van-sticky>
          <header-component :title="data.title" :showPre="true" :titleSlide="titleSlide" :padding="false"/>
       </van-sticky>
       <!-- 数据总览 -->
       <dataView class="dataView"></dataView>
       <!-- 收藏类型 -->
       <collectView></collectView>
       <!-- 收藏的网站来源 TOP 10 -->
       <collectWebSource title="收藏的网站来源 TOP 10"></collectWebSource>
       <!-- 访问的网站来源 TOP 10 -->
       <collectWebSource style="position:relative;top:10px" title="访问的网站来源 TOP 10"></collectWebSource>
    </div>
</template>

<script setup>
import { ref, watch, reactive } from "vue";
import headerComponent from "@/components/header/index.vue";
import useScroll from "@/hooks/useScroll";
import dataView from './dataView/index.vue'
import collectView from './collectView/index.vue'
import collectWebSource from './collectWebSource/index.vue'
const statisticsRef = ref();

let { scrollTop } = useScroll(statisticsRef);
let titleSlide = ref(1)
// watch(scrollTop, (newValue, oldValue) => {
//   console.log("watch 已触发", newValue)
//   // -1 下拉 0什么都不做 1上拉
//   if(newValue > oldValue && newValue > 9.6){
//     // 执行动画
//     titleSlide.value = 1
//   }else if(newValue < oldValue && newValue <= 9.6){
//     titleSlide.value = -1
//   }

// });

const data = new reactive({
  title: "用量统计",
});

</script>

<style lang="less" scoped>
.statistics {
  padding: 0 12px 60px;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  overflow-x: hidden;
  .dataView{
    position: relative;
  }
}
.statistics::-webkit-scrollbar {
  display: none;/*隐藏滚动条*/
}
</style>
